<template>
  <div class="page-list-body">
    <el-table
      class="page-index-table"
      :data="pageList"
      style="width: 100%;"
      ref="myTable"
      stripe
      @row-click="tipPagePreviewPage"
    >
      <el-table-column
        v-for="(item, ind) in tablePageColumn"
        :key="ind"
        :label="item.label"
        :prop="item.key"
        :align="item.align"
        :min-width="item.minWidth"
      >
        <template slot-scope="scope">
          <div v-if="!item.isCustom" class="text-ellipsis-2">
            {{ scope.row[item.key] || item.defaultText }}
          </div>
          <div
            class="text-ellipsis-2"
            v-if="item.isCustom && item.key != 'ind' && item.key != 'modules'"
          >
            {{ scope.row[item.key] || item.defaultText }}
          </div>
          <div
            class="text-ellipsis-2"
            v-if="item.isCustom && item.key == 'ind'"
          >
            {{ scope.$index + 1 }}
          </div>
          <div
            class="text-ellipsis-2"
            v-if="item.isCustom && item.key == 'modules'"
          >
            <div
              style="display: inline-block;"
              v-if="
                scope.row[item.key].indexOf('engineer') > -1 ||
                  scope.row[item.key].indexOf('flood_prevention') > -1 ||
                  scope.row[item.key].indexOf('river') > -1 ||
                  scope.row[item.key].indexOf('water_resource') > -1 ||
                  scope.row[item.key].indexOf('geological_section') > -1 ||
                  scope.row[item.key].indexOf('equipment_monitoring') > -1
              "
            >
              <el-tag
                size="mini"
                v-if="scope.row[item.key].indexOf('engineer') > -1"
              >
                项目工程
              </el-tag>
              <el-tag
                size="mini"
                type="success"
                v-if="scope.row[item.key].indexOf('flood_prevention') > -1"
              >
                智慧防汛
              </el-tag>
              <el-tag
                size="mini"
                type="info"
                v-if="scope.row[item.key].indexOf('river') > -1"
              >
                智慧河湖
              </el-tag>
              <el-tag
                size="mini"
                type="warning"
                v-if="scope.row[item.key].indexOf('water_resource') > -1"
              >
                智慧水资
              </el-tag>
              <el-tag
                size="mini"
                type="danger"
                v-if="scope.row[item.key].indexOf('geological_section') > -1"
              >
                地质剖面
              </el-tag>
              <el-tag
                size="mini"
                type="danger"
                v-if="scope.row[item.key].indexOf('equipment_monitoring') > -1"
              >
                设备监测
              </el-tag>
            </div>
            <el-tag size="mini" type="info" v-else>其他</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import PageList from "../../utils/page.json";
import StringUtils from "../../utils/string";
// index为所有页面的索引列表，包含每个页面所属模块、路径地址、页面名称、介绍、宽高配比展示
export default {
  name: "index",
  data() {
    return {
      moduleList: {
        engineer: {
          id: 1,
          key: "engineer",
          name: "项目工程"
        },
        flood_prevention: {
          id: 3,
          key: "flood_prevention",
          name: "智慧防汛"
        },
        river: {
          id: 2,
          key: "river",
          name: "智慧河湖"
        },
        water_resource: {
          id: 4,
          key: "water_resource",
          name: "智慧水资"
        },
        geological_section: {
          id: 5,
          key: "geological_section",
          name: "地质剖面"
        },
        equipment_monitoring: {
          id: 7,
          key: "equipment_monitoring",
          name: "设备监测"
        }
      },
      pageList: [],
      tablePageColumn: [
        {
          key: "ind",
          label: "序号",
          align: "center",
          minWidth: "60",
          defaultText: "--",
          isCustom: true
        },
        {
          key: "name",
          label: "名称",
          align: "center",
          minWidth: "120",
          defaultText: "--",
          isCustom: false
        },
        {
          key: "modules",
          label: "所属模块",
          align: "center",
          minWidth: "150",
          defaultText: "--",
          isCustom: true
        },
        {
          key: "path",
          label: "地址",
          align: "center",
          minWidth: "120",
          defaultText: "--",
          isCustom: false
        },
        {
          key: "width",
          label: "宽度",
          align: "center",
          minWidth: "80",
          defaultText: "--",
          isCustom: false
        },
        {
          key: "height",
          label: "高度",
          align: "center",
          minWidth: "80",
          defaultText: "--",
          isCustom: false
        },
        {
          key: "description",
          label: "描述",
          align: "center",
          minWidth: "200",
          defaultText: "--",
          isCustom: false
        }
      ]
    };
  },
  mounted() {
    this.pageList = PageList;
  },
  methods: {
    tipPagePreviewPage(row, event, column) {
      console.log(row, event, column);
      let params = {
        data: row
      };
      localStorage.setItem("previewPageItem", StringUtils.toStr(params));
      this.$router.push({
        path: "/unity/preview",
        query: params
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/css/unity.scss");
</style>
